<template>
	<div class="org">
		<el-form ref="form" :model="form" label-width="80px" class="form">
			<div class="keyword">
				<!-- <el-input v-model="form.keyword" @keyup.enter.native="onSubmit" placeholder="请输入关键字搜索"></el-input> -->
			</div>
			<div class="search">
				<el-button type="primary" @click="AddPower()">新增权限</el-button>
			</div>
		</el-form>
		<div class="line"></div>
		<div class="orgTable">
			<el-table :data="tableData" stripe style="width: 80%">
				<el-table-column prop="name" label="权限名称" width="180">
				</el-table-column>
				<el-table-column prop="controller" label="权限地址url" width="180">
				</el-table-column>
				<el-table-column prop="" label="权限所属角色">
					<template slot-scope="scope">
						<span class="operation" v-for="(itme,index) in scope.row.role">{{itme.name}} <i style="margin-right:5px">|</i></span>
					</template>
				</el-table-column>
				<el-table-column prop="controller" label="操作">
					<template slot-scope="scope">
						<span class="operation" @click="modify(scope.row)">修改</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 			<el-pagination background layout="prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 150px;">
			</el-pagination> -->
		</div>

		<el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" :modal="false">
			<el-form :model="form">
				<el-form-item label="权限名称:" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" size="medium"></el-input>
				</el-form-item>
				<el-form-item label="权限地址:" :label-width="formLabelWidth">
					<el-input v-model="form.controller" autocomplete="off" size="medium"></el-input>
				</el-form-item>
				<el-form-item label="所属角色:" :label-width="formLabelWidth">
					<el-checkbox-group v-model="form.checkList">
						<el-checkbox label="5">系统管理员</el-checkbox>
						<el-checkbox label="2">机构</el-checkbox>
						<el-checkbox label="1">裁判长</el-checkbox>
						<el-checkbox label="3">裁判机构</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				total: null,
				currentPage: '',
				dialogFormVisible: false,
				form: {
					id: '',
					keyword: '',
					name: '',
					controller: '',
					checkList: []
				},
				formLabelWidth: '80px',
				type: '',
				title: ''
			}
		},
		created() {
			this.get_allclub()
		},
		methods: {
			onSubmit() {
				this.get_allclub()
			},
			get_allclub() {
				this.$axios.post('role/RoleIndex', {
						type: window.sessionStorage.getItem('user_type'),
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.tableData = res.data.data
							// this.total = res.data.data.length
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			ChangePage(page) {
				this.currentPage = page
				this.get_allclub()
			},
			modify(row) {
				this.dialogFormVisible = true;
				this.form.controller = row.controller
				this.form.name = row.name
				this.form.id = row.id
				// console.log(row)
				let arr = []
				if (row.role) {
					for (var i = 0; i < row.role.length; i++) {
						if (row.role[i].name == "管理员") {
							arr.push('5')
						}
						if (row.role[i].name == "机构") {
							arr.push('2')
						}
						if (row.role[i].name == "裁判长") {
							arr.push('1')
						}
						if (row.role[i].name == "裁判机构") {
							arr.push('3')
						}
					}
				}
				this.form.checkList = arr
				// console.log(this.form.checkList)
				// this.form.checkList = row.
				this.type = 2
				this.title = '修改权限'
			},
			AddPower() {
				this.dialogFormVisible = true;
				this.type = 1
				this.title = '新增权限'
			},
			confirm() {
				this.dialogFormVisible = false;
				console.log(this.type)
// 				if (this.form.controller.indexOf('/') == -1) {
// 						this.$message({
// 							type: 'info',
// 							message: '请填写正确的地址'
// 						})
// 				} else {
					if (this.type == 1) {
						this.$axios.post('role/AddPower', {
								name: this.form.name,
								controller1: this.form.controller,
								type: this.form.checkList.join(',')
							}, {
								headers: {
									token: window.sessionStorage.getItem('token')
								}
							})
							.then(res => {
								if (res.data.code == 2000) {
									this.get_allclub()
									this.$message({
										type: 'success',
										message: res.data.msg
									})
								}
							})
							.catch(error => {
								console.log(error)
							});
					}
					if (this.type == 2) {
						this.$axios.post('role/GetEdit', {
								power_id: this.form.id,
								name: this.form.name,
								controller1: this.form.controller,
								type: this.form.checkList.join(',')
							}, {
								headers: {
									token: window.sessionStorage.getItem('token')
								}
							})
							.then(res => {
								if (res.data.code == 2000) {
									this.get_allclub()
									this.$message({
										type: 'success',
										message: res.data.msg
									})
								}
							})
							.catch(error => {
								console.log(error)
							});
					}
				// }
			}
		}
	}
</script>
<style lang="less" scoped>
	.org {
		margin-top: 36px;

		.form {
			width: 80%;
			display: flex;
			justify-content: space-between;
			margin-left: 26px;
			margin-bottom: 35px;

			.keyword {
				width: 410px;
			}

			.state {
				width: 200px;
			}

			.search {
				width: 123px;
				text-align: right;
			}
		}

		.line {
			width: 80%;
			/*height: 0.5px;*/
			border-top: 1px #dcdfe6 dotted
		}

		.orgTable {
			margin-top: 34px;
			margin-left: 40px;
		}
	}

	.ogg {
		color: #FF9800;
	}

	.green {
		color: #259B24;
	}

	.red {
		color: red;
	}

	.operation {
		color: #409EFF;
		cursor: pointer;
	}
</style>
